<template>
	<view class="local-list">
		<view
			style="position:relative;margin-top:2rpx;"
			class="item bg-white margin-lr-bj radius-bock padding-lr-bj padding-tb-bj"
			v-for="(find, index) in dataList"
			:key="find.id"
			@click="gotoWrokDetail(find)"
		>
			<view class="left">
				<view
					class="find-list-item-container-item"
					v-if="find.images.length > 0"
					:style="{
						width: `${width * 0.33}px`
					}"
					@tap="previewImage(find.images, 0)"
				>
					<image
						class="radius-bock"
						lazy-load
						:src="oss(find.images[0].url, 160, 160)"
						:style="{ width: `${width * 0.33}px`, height: `${width * 0.33}px` }"
						mode="scaleToFill"
					/>
				</view>
				<view class="level-tag">
					<image v-if="find.expire_days == 7" src="/static/images/sevenday.png" style="width:76rpx;height:76rpx;"></image>
					<image v-if="find.expire_days == 30" src="/static/images/ssday.png" style="width:76rpx;height:76rpx;"></image>
					<image v-if="find.expire_days == 90" src="/static/images/jsday.png" style="width:76rpx;height:76rpx;"></image>
					<image v-if="find.expire_days == 365" src="/static/images/oneyearday.png" style="width:76rpx;height:76rpx;"></image>
				</view>
			</view>
			<view class="info">
				<view class="title-box">
					<view>{{ find.title }}</view>
					<view class="detail">
						详情
						<image src="/static/images/arrow.png" mode="widthFix" style="width: 48rpx;" />
					</view>
				</view>
				<view class="price">
					<text v-if="find.type_id == 30 && find.lowprice != '0.00'">{{ find.lowprice }}-{{ find.highprice }}/月</text>
					<text v-if="find.type_id == 30 && find.lowprice == '0.00'">面议</text>
				</view>
				<view class="name-box">
					<view class="name">{{ find.user.nickname }}</view>
					<view class="addr">发布于{{ find.area }}</view>
				</view>
			</view>
		</view>
		<uni-popup ref="contentRef" type="bottom">
			<view
				class="content-wrapper"
				style="width:80%;background:#fff;padding:40rpx;box-sizing: border-box;
					margin:0 auto;border-radius: 20rpx; color:#333;overflow: auto;max-height:800rpx;"
			>
				{{ showcontent }}
				<view
					style="text-align: center; color:#999"
					@click="
						$refs.contentRef.close();
						popupShow = false;
					"
				>
					---点击关闭---
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
// #ifdef H5
import jssdk from '@/common/libs/jssdk';
// #endif
export default {
	props: {
		isComment: {
			type: String,
			default: 'N'
		},
		height: {
			type: Number,
			default: 0
		},
		width: {
			type: Number,
			default: 0
		},
		currentItemId: {
			type: String,
			default: 'find'
		},
		dataList: {
			type: Array
		},
		current_page: {
			type: Number
		},
		last_page: {
			type: Number
		}
	},
	data() {
		return {
			typeList: {
				new: 'wanl-bg-blue',
				live: 'wanl-bg-red',
				want: 'wanl-bg-green',
				activity: 'wanl-bg-redorange',
				show: 'wanl-bg-pink'
			},
			showcontent: ''
		};
	},
	watch: {
		currentItemId(newVal, oldVal) {
			if (newVal === 'find') {
				this.loadData();
			}
		}
	},
	mounted() {
		if (this.currentItemId === 'find') {
			this.loadData();
		}
	},
	methods: {
		popopen() {
			console.log(this);
			console.log(this.$refs.contentRef);
			//this.$refs.wanlCommentPopup.open();
			this.popupShow = true;
			this.$refs.contentRef.open('center');
		},

		gotoWrokDetail(find) {
			// uni.navigateTo({
			// 	url: '/pages/local/localDetail?width=' + this.width + '&height=' + this.height + '&find=' + JSON.stringify(find)
			// });
			// uni.setStorageSync('detail', JSON.stringify(find));
			uni.navigateTo({
				url: '/pages/local/detail?id=' + find.id
			});
		},

		async loadData(type) {
			this.status = 'loading';
			// 判断上拉还是下拉
			if (type === 'upper') {
				this.current_page = 1;
			} else if (type === 'lower') {
				if (this.current_page >= this.last_page) {
					this.status = 'noMore';
					return false;
				} else {
					this.current_page += 1;
				}
			}
		},

		callphone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},

		handleFind(find, index) {
			this.showcontent = this.formatHtml(find.content);
		},

		handleUpper() {
			this.loadData('upper');
		},
		handleLower() {
			this.loadData('lower');
		},
		oss(url, w = 120, h = 120, modenum = 2, type = '', format = 'jpg', resize = 'resize', multiple = 3) {
			let ossStc = this.$store.state.common.appUrl.oss;
			let image = '';
			let mode = ['m_lfit', 'm_mfit', 'm_fill', 'm_fixed'];
			// 图像，自适应方向：1，渐进显示：1，转换格式：jpg，图片质量：q_90，图片锐化：50，浓缩图
			let rule = [
				'?x-oss-process=image',
				'auto-orient,1',
				'interlace,1',
				'format,jpg',
				'quality,q_90',
				'sharpen,50',
				'resize,m_fixed,w_120,h_120'
			];
			// 转换格式
			if (format == 'png') {
				rule[3] = ['format', 'png'].join(',');
			}
			// 判断是否有高度
			if (w == 0) {
				rule[6] = [resize, mode[modenum], `h_${h * multiple}`].join(',');
			} else if (h == 0) {
				rule[6] = [resize, mode[modenum], `w_${w * multiple}`].join(',');
			} else {
				rule[6] = [resize, mode[modenum], `w_${w * multiple}`, `h_${h * multiple}`].join(',');
			}
			//当地址不存在
			if (url) {
				if (/^data:image\//.test(url)) {
					image = url;
				} else if (/^(http|https):\/\/.+/.test(url)) {
					rule.pop();
					image = url + rule.join('/');
				} else {
					image = ossStc + url + rule.join('/');
				}
			} else {
				if (type == 'transparent') {
				} else if (type == 'avatar') {
					image = ossStc + '/common/mine_def_touxiang_3x.png';
				} else {
					image = ossStc + '/common/img_default3x.png';
				}
			}
			return image;
		},
		//预览图片
		previewImage(image, index) {
			var imgArr = [];
			for (var item of image) {
				imgArr = imgArr.concat(this.oss(item.url, 500));
			}
			uni.previewImage({
				urls: imgArr,
				current: imgArr[index],
				indicator: 'number'
			});
		},
		// 格式化html
		formatHtml(content) {
			return content.replace(/<\/?.+?>/g, '').replace(/ /g, '');
		},
		timeToDate(timestamp) {
			if (timestamp == null) timestamp = Number(new Date());
			timestamp = parseInt(timestamp);
			// 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
			if (timestamp.toString().length == 10) timestamp *= 1000;
			var timer = new Date().getTime() - timestamp;
			timer = parseInt(timer / 1000);
			// 如果小于5分钟,则返回"刚刚",其他以此类推
			let tips = '';
			switch (true) {
				// case timer < 300:
				// 	tips = '刚刚';
				// 	break;
				// case timer >= 300 && timer < 3600:
				// 	tips = parseInt(timer / 60) + '分钟前';
				// 	break;
				// case timer >= 3600 && timer < 86400:
				// 	tips = parseInt(timer / 3600) + '小时前';
				// 	break;
				// case timer >= 86400 && timer < 2592000:
				// 	tips = parseInt(timer / 86400) + '天前';
				// 	break;
				default:
					var date = new Date(timestamp);
					var year = date.getFullYear();
					var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
					var date = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
					tips = `${year}-${month}-${date}`;
			}
			return tips;
		}
	}
};
</script>

<style scoped lang="scss">
@import '@/static/style/wanlnvue.css';
.local-list {
	.item {
		display: flex;
		gap: 24rpx;
		background: url(/static/images/info-bg.png) no-repeat;
		background-size: cover;
	}
	.left {
		position: relative;
	}
	.tag {
		position: absolute;
		left: 0;
		top: 20rpx;
		background: none !important;
	}
	.info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.title-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.detail {
			display: flex;
			align-items: center;
			gap: 6rpx;
			color: #ffcb66;
			font-size: 24rpx;
		}
	}
	.price {
		color: #ff6666;
		font-size: 30rpx;
	}
	.name-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 22rpx;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 8rpx 28rpx;
		margin-top: 20rpx;
	}
}

.shop-avatar {
	background-color: #f5f5f5;
	height: 64rpx;
	width: 64rpx;
}

.find-button {
	background-color: #f0f0f0;
	height: 64rpx;
	line-height: 1;
}

.find-button-radius {
	background-color: #f0f0f0;
	line-height: 1;
	height: 65rpx;
	width: 65rpx;
}

.find-list-item-content {
	/* #ifndef APP-PLUS */
	display: inline;
	/* #endif */
}

.find-list-item-new {
	border-top: 1px solid #eee;
}

.find-list-item-container-item {
	margin: 2rpx;
	/* #ifndef APP-PLUS */
	box-sizing: border-box;
	/* #endif */
	overflow: hidden;
	background-color: #f9f9f9;
}

.live-cover {
	background-color: #f9f9f9;
	height: 404rpx;
}

.live-cover-bg {
	z-index: 1;
}

.live-cover-main {
	z-index: 2;
}

.live-cover-paly {
	height: 120rpx;
	width: 120rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.5);
}

.live-cover-people {
	bottom: 25rpx;
	left: 25rpx;
}

.live-cover-fabulous {
	bottom: 25rpx;
	right: 25rpx;
}

.live-cover-tag {
	height: 50rpx;
	width: 50rpx;
}

.live-goods-item {
	background-color: #f9f9f9;
	height: 200rpx;
	overflow: hidden;
}

.find-list-item-goods {
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
	height: 100rpx;
}

.find-list-item-goods-item {
	/* #ifndef APP-PLUS */
	display: inline-flex;
	/* #endif */
	height: 100rpx;
	margin-right: 12rpx;
	border-radius: 18rpx;
	background-color: #f9f9f9;
	width: 100%;
}

.find-list-item-goods-item-img {
	height: 100rpx;
	width: 100rpx;
	border-top-left-radius: 18rpx;
	border-bottom-left-radius: 18rpx;
}

.find-list-item-goods-item-content-title-text {
	lines: 1;
	overflow: hidden;
	/* #ifndef APP-PLUS */
	white-space: nowrap;
	/* #endif */
	text-overflow: ellipsis;
}

.find-list-item-goods-item-icon {
	width: 60rpx;
}

image {
	width: 100%;
	height: 100%;
}

.level-tag { 
	position: absolute;
	top: -4rpx !important;
	left: -4rpx !important;
}
</style>
